import React from 'react';
import {Button, InputNumber, Popconfirm, Space, Table, Tag} from 'antd';
import type {TableProps} from 'antd';
import {Card} from "antd";
import useProductData from "@/hooks/get_product_data.ts";
import {Item} from '@/vite-env'
import {TruckOutlined} from "@ant-design/icons";


const columns: TableProps<Item>['columns'] = [
    {
        title: '商品名称',
        align: 'center',
        dataIndex: 'product_name',
        key: 'product_name',
        render: (text) => <b>{text}</b>
    },
    {
        title: '商品价格',
        align: 'center',
        dataIndex: 'price',
        key: 'price',
        render: (_, record) => {
            return <Tag color={'blue'}>￥{record.price + '元'}</Tag>
        }
    },
    {
        align: 'center',
        title: '商品分类',
        dataIndex: 'category_id',
        key: 'category_id',
        render: (_, record) => {
            return <Tag color={'green'}>{record.category_id}</Tag>
        }
    },
    {
        title: '商品库存',
        align: 'center',
        key: 'stock_quantity',
        dataIndex: 'stock_quantity',
        render: (_, record) => {
            return <Tag color={'red'}>{record.stock_quantity + '件'}</Tag>
        }
    },
    {
        title: '操作',
        align: 'center',
        width: 400,
        key: 'action',
        render: (_, record) => (
            <Space size="middle">
                <Button type="primary">详情</Button>
                <Popconfirm
                    icon={<TruckOutlined style={{fontSize: 20}} />}
                    title="请修改库存数量"
                    description={<div style={{margin: '20px 20px 20px 0'}}>
                        现有库存数量：<InputNumber defaultValue={record.stock_quantity}/>
                    </div>}
                    okText="确定"
                    cancelText="取消"
                >
                    <Button type={"primary"}>增加库存</Button>
                </Popconfirm>
                <Button type="primary" danger>删除</Button>
            </Space>
        ),
    },
];


const Product_Data: React.FC = () => {
    // 获取商品数据
    const {productData} = useProductData()
    return (
        <Card bordered={false} style={{width: '100%', height: '90vh'}}>
            <Table sticky={true} columns={columns} dataSource={productData} scroll={{y: 540}}/>
        </Card>
    )
}

export default Product_Data